<template>
  <el-dialog
    :title="dataForm.id?'编辑':'新增'"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRules"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="待办事项" prop="name">
        <el-input
          v-model="dataForm.name"
          autocomplete="off"
          placeholder="请输入待办事项"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-input
          v-model="dataForm.remark"
          autocomplete="off"
          placeholder="请输入描述"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="是否完成" prop="status">
        <el-switch
          v-model="dataForm.status"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="dataForm.id?update():add()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getTodoInfo, addTodo, updateTodo, checkRepeat } from '@/api/todo'

export default {
  data() {
    // 定义校验器，这里校验的是名字不能重复
    const validateTodoName = (rule, value, callback) => {
      checkRepeat({
        'id': this.dataForm.id,
        'name': 'name',
        'value': this.dataForm.name
      }).then(data => {
        if (data) {
          callback(new Error('待办事项：' + this.dataForm.name + ' 已建立'))
        } else {
          callback()
        }
      }).catch(err => {
        callback(err)
      })
    }

    return {
      // 控制当前的弹框的显示与隐藏
      dialogFormVisible: false,
      // 表单数据，定义和初始化
      dataForm: {
        id: undefined,
        name: '',
        status: 0,
        remark: ''
      },
      // 表单校验规则，一定要保证 下面的key和prop的值上保持一致
      dataRules: {
        name: [
          { required: true, message: '待办事项不能为空', trigger: 'blur' },
          { validator: validateTodoName, trigger: 'blur' },
          { max: 10, message: '长度不能超过10个字符', trigger: 'blur' }
        ],
        remark: [{ max: 200, message: '备注长度不能超过200', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init(id) {
      this.dialogFormVisible = true
      this.dataForm.id = id || undefined
      if (id) {
        getTodoInfo(id).then((data) => {
          this.dataForm.name = data.name
          this.dataForm.status = data.status
          this.dataForm.remark = data.remark
        })
      }
    },
    // 新增待办
    add() {
      // 表单校验
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          this.$message.error('校验不通过')
          return
        }
        addTodo(this.dataForm).then(data => {
          this.dialogFormVisible = false
          this.$message.success('新增成功')
          this.$emit('refreshDataList')
        }).catch(e => {
          this.$message.error(e.msg)
        })
      })
    },
    // 更新的待办
    update() {
      // 表单校验
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          this.$message.error('校验不通过')
          return
        }
        updateTodo(this.dataForm).then(data => {
          this.dialogFormVisible = false
          this.$message.success('更新成功')
          this.$emit('refreshDataList')
        }).catch(e => {
          this.$message.error(e.msg)
        })
      })
    }
  }
}
</script>
